<template>
    <div class="login-wrap">
        <el-form :model="registerForm" :rules="rules" ref="registerForm" class="login-container">
            <h2 class="title">用户注册</h2>
            <el-row>
                <el-col class="usernameAndEmail">
                    <el-form-item label="用户名" prop="username">
                        <el-input type="text" v-model="registerForm.username" placeholder="用户名"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input type="text" v-model="registerForm.email" placeholder="邮箱"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="passWord">
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="registerForm.password" placeholder="密码"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password" v-model="registerForm.checkPassword" placeholder="确认密码"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="success" style="width:100%;" @click="doRegister('registerForm')">完成注册</el-button>
            </el-form-item>
            <el-row style="text-align: center;margin-top:-10px">
                <el-link type="primary" @click="gotoLogin()">回到用户登录</el-link>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import user from "@/utils/user"
export default {
    name: 'userRegister',
    data() {
        //密码验证
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.registerForm.checkPassword !== '') {
                    this.$refs.registerForm.validateField('checkPassword');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        //验证邮箱
        var checkEmail = (rule, value, callback) => {
            const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/;
            if (value === '') {
                callback(new Error('邮箱不能为空'));
            }else if (regEmail.test(value)) {
                callback();
            } else {
                callback(new Error("请输入合法邮箱"));
            }
        };
        //数据模型
        return {
            registerForm: {
                username: '',
                password: '',
                email: ''
            },
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                email: [
                    { validator: checkEmail, trigger: 'blur'},
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' },
                ],
                checkPassword: [
                    { validator: validatePass2, trigger: 'blur' },
                ],
            }
        };
    }
    , methods: {
        gotoLogin() {
            this.$router.push('/');
        },
        doRegister(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let userInfo = {
                        username:this.registerForm.username,
                        password:this.registerForm.password,
                        email:this.registerForm.email
                    }

                    user.register(userInfo).then(res => {
                        if (res.data.code === 1) {
                            alert('注册成功!');
                            this.$router.push('/');
                            console.log(res.message);
                        }
                        else {
                            alert(res.data.msg);
                            console.log(res.message);
                        }
                    }).catch(e =>{
                        alert('用户名已存在!');
                        console.log(e.message);
                    })
                } else {
                    console.log('注册失败!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url("../../assets/David.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

@media screen and (min-width: 800px) {
    .login-container {
        width: 650px;
    }

    .usernameAndEmail {
        width: 45%;
    }

    .passWord {
        width: 45%;
        position: relative;
        left: 10%;
    }
    
}
</style>